<template>
  <div class="product-choose">
    <el-table
      :data="productList"
      style="width: 100%;">
      <template v-for="(field, index) in fieldList">
        <el-table-column
          :key="index"
          :prop="field.prop"
          :label="field.label"
          show-overflow-tooltip />
      </template>
      <el-table-column label="退货数量">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.retreatNumber"
            :controls="false"
            :precision="2"
            :min="0"
            :max="scope.row.shengNumber"
            placeholder="请输入"
            @change="priceOrNumChange(scope)" />
        </template>
      </el-table-column>
      <el-table-column label="退货单价">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.retreatPrice"
            :controls="false"
            placeholder="请输入"
            @input="priceOrNumChange(scope)" />
        </template>
      </el-table-column>
      <el-table-column
        prop="retreatSubtotal"
        label="合计"/>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click.stop="removeItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <flexbox class="handle-footer">
      <div class="total-info">已选中产品：
        <span class="info-yellow">{{ totalCount }}</span>&nbsp;&nbsp;总金额：
        <el-input-number
          v-model="totalPrice"
          :controls="false"
          placeholder="请输入"
          style="width: 120px"
          @input="totalPriceChange"
          @blur="totalPrice || (totalPrice = 0)" />
        &nbsp;元
      </div>
    </flexbox>
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/6/10
 */
import { jxcRetreatQueryEdProductListAPI } from '@/api/jxc/retreat'

import RelativeCard from '../../RelativeCard'
import { accMul, accAdd } from '@/utils/acc'

export default {
  name: 'ProductChoose',
  components: {
    RelativeCard
  },
  inheritAttrs: false,
  props: {
    id: {
      type: [String, Number]
    },
    relativeData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showPopover: false,

      fieldList: [
        { label: '产品名称', prop: 'productName', width: null },
        { label: '产品规格', prop: 'spDataValue', width: null },
        { label: '产品单位', prop: 'productCompany', width: null },
        { label: '剩余数量', prop: 'shengNumber', width: null }
      ],
      productList: [],
      totalPrice: 0,
      totalCount: 0
    }
  },
  watch: {
    id: {
      handler(val) {
        if (this.id) {
          this.getProductList()
        }
      },
      immediate: true
    }
  },
  methods: {
    getProductList() {
      const params = {
        orderId: this.id
      }
      if (this.relativeData.editBatchId) {
        params.batchId = this.relativeData.editBatchId
      }
      jxcRetreatQueryEdProductListAPI(params).then(res => {
        this.productList = res.data
        if (this.productList.length === 0) {
          this.$message.warning('暂无可退货产品，请先进行入库')
        }
        this.totalPriceChange()
      }).catch(() => {})
    },

    /**
     * 修改单价/数量
     */
    priceOrNumChange(scope) {
      const row = scope.row
      row.retreatSubtotal = accMul(row.retreatPrice, row.retreatNumber)
      this.calcTotal()
    },
    /**
     * 计算总价
     */
    calcTotal() {
      let res = 0
      this.productList.forEach(o => {
        res = accAdd(res, o.retreatSubtotal)
      })
      this.totalPrice = res

      const arr = this.productList.map(o => o.retreatNumber)
      let total = 0
      arr.forEach(num => {
        total += num
      })
      this.totalCount = total

      this.totalPriceChange()
    },

    removeItem(index) {
      this.productList.splice(index, 1)
      this.calcTotal()
    },

    totalPriceChange() {
      this.$emit('change', {
        data: this.productList,
        total: this.totalPrice
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "index";
</style>
